<template>
  <div class="ArtistDetail">
    <div class="Top">
      <img v-lazy="detail.cover" alt="" />
      <div class="right">
        <div class="title">
          <span>{{ detail.name }}</span>
        </div>
        <div class="count">
          <span>单曲数:{{ detail.musicSize }}</span>
          <span>专辑数:{{ detail.albumSize }}</span>
          <span>MV数:{{ detail.mvSize }}</span>
        </div>
        <div class="desc">
          <span>简介:</span>
          <span>{{ detail.briefDesc }}</span>
        </div>
      </div>
    </div>
    <!-- tab切换页 -->
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="专辑" name="first">
        <RankList :list="data.hotAlbums" :isShow="false"></RankList>
      </el-tab-pane>
      <el-tab-pane label="MV" name="second">
        <MvList :mvs="data.mvs"></MvList>
      </el-tab-pane>
      <el-tab-pane label="歌手详情" name="third">
        <div class="description" v-for="item in data.artDetail" :key="item.ti">
          <h4>{{ item.ti }}</h4>
          <p v-for="(T, index) in item.txt" :key="index">{{ T }}</p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="相似歌手" name="fourth">
        <MenuList :list="data.artists" @itemClick="itemClick"></MenuList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RankList from '@/components/list/RankList';
import MvList from '@/components/list/MvList';
import MenuList from '@/components/list/MenuList';
export default {
  data() {
    return {
      aid: '',
      detail: '',
      activeName: 'first',
      currentIndex: '0',
      data: {
        hotAlbums: [],
        mvs: '',
        artDetail: '',
        artists: '',
      },
    };
  },
  created() {
    this.aid = this.$route.params.aid;
    this.getArtistDetail();
    this.getTabsData();
  },
  components: { RankList, MvList, MenuList },
  methods: {
    //请求歌手详情
    async getArtistDetail() {
      const { data } = await this.$request('/artist/detail', { id: this.aid });
      this.detail = data.artist;
    },
    //获取专辑详情
    async getAlbumDetail(id) {
      const res = await this.$request('/album', { id });
      this.data.hotAlbums.push(res);
    },
    //获取tabs数据
    async getTabsData() {
      switch (this.currentIndex) {
        case '0':
          const { hotAlbums } = await this.$request('/artist/album', { id: this.aid });
          hotAlbums.forEach((item) => {
            this.getAlbumDetail(item.id);
          });
          break;
        case '1':
          const { mvs } = await this.$request('/artist/mv', { id: this.aid });
          this.data.mvs = mvs;
          break;
        case '2':
          const { introduction } = await this.$request('/artist/desc', { id: this.aid });
          //对歌手详情数据的处理
          introduction.forEach((item) => {
            item.txt = item.txt.split('\n');
          });
          this.data.artDetail = introduction;
          break;
        case '3':
          const { artists } = await this.$request('/simi/artist', { id: this.aid });
          this.data.artists = artists;
          break;
      }
    },
    tabClick(e) {
      this.currentIndex = e.index;
      this.getTabsData();
    },
    itemClick(id) {
      this.$router.push('/artistdetail/' + id);
    },
  },
  watch: {
    '$route.params.aid'(aid) {
      if (!aid) return;
      this.aid = aid;
      this.activeName = 'first';
      this.currentIndex = '0';
      //清空专辑数据
      this.data.hotAlbums = [];
      this.getArtistDetail();
      this.getTabsData();
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
.ArtistDetail {
  .Top {
    display: flex;
    img {
      @include image(200px, 5px);
      margin-right: 20px;
    }
    .right {
      font-size: 12px;
      > div {
        margin-bottom: 10px;
      }
      .title {
        span {
          font-size: 22px;
          font-weight: 600;
        }
      }
      .count {
        span {
          margin-right: 5px;
        }
      }
      .desc {
        :last-child {
          color: #606266;
        }
      }
    }
  }
  .description {
    p {
      font-size: 13px;
      color: #606266;
    }
  }
}
</style>